<template>
  <div>
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
    <header>
      <van-nav-bar v-if="pageType === 'chooseType'" class="main_header" title="注册类型" />
      <van-nav-bar v-if="pageType === 'realname'" class="main_header" title="实名认证" left-text="返回" left-arrow @click-left="goBack()" />
    </header>
    <template v-if="pageType === 'chooseType'">
      <div class="choose_type_content">
        <div class="title">请选择注册类型</div>
        <van-radio-group v-model="memberType">
          <van-cell-group>
            <van-cell title="个人" clickable @click="memberType = 'Personal'">
              <template #right-icon>
                <van-radio name="Personal" />
              </template>
            </van-cell>
            <van-cell title="团体" clickable @click="memberType = 'Delegation'">
              <template #right-icon>
                <van-radio name="Delegation" />
              </template>
            </van-cell>
            <van-cell title="个人、团体" clickable @click="memberType = 'PersonalDelegation'">
              <template #right-icon>
                <van-radio name="PersonalDelegation" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="next_step">
        <van-button type="primary" @click="nextStep()">下一步</van-button>
      </div>
    </template>
    <template v-if="pageType === 'realname'">
      <div class="realname">
        <van-tabs v-model="radioRealNameTyepe">
          <van-tab name="NameNumber" title="号码验证">
            <van-form v-if="radioRealNameTyepe === 'NameNumber'" ref="createRegisterInputVO" label-width="60px" label-align="left">
              <van-field
                v-model.trim="createRegisterInputVO.idCard.name"
                label="姓名"
                name="name"
                placeholder="请输入姓名"
                :rules="createRegisterInputVO_Rules.idCard.name"
              />
              <van-field
                v-model.trim="createRegisterInputVO.idCard.idCardNumber"
                label="证件号码"
                name="idCardNumber"
                placeholder="请输入身份号码"
                :rules="createRegisterInputVO_Rules.idCard.idCardNumber"
              />
            </van-form>
          </van-tab>
          <van-tab name="OCR" title="证件验证">
            <van-form v-if="radioRealNameTyepe === 'OCR'" ref="createRegisterInputVO" label-width="60px" label-align="left" style="width: 290px;margin: 0 auto;">
              <van-field
                v-model="createRegisterInputVO.idCard.idCardFrontImage"
                class="no_border"
                label=""
                label-width="0"
                name="idCardFrontImage"
                :rules="createRegisterInputVO_Rules.idCard.idCardFrontImage"
              >
                <template #input>
                  <upload-file
                    ref="idCardFrontImage"
                    :action="baseUrl + '/api/upload/image'"
                    accept=".jpg,.png,.jpeg"
                    class-name="id_card"
                    @uploadSuccess="uploadSuccessFrontImage"
                  >
                    <span slot="uploadName">点击上传证件正面</span>
                  </upload-file>
                </template>
              </van-field>
              <van-field
                v-model="createRegisterInputVO.idCard.idCardBackImage"
                label=""
                label-width="0"
                name="idCardBackImage"
                :rules="createRegisterInputVO_Rules.idCard.idCardBackImage"
              >
                <template #input>
                  <upload-file
                    ref="idCardBackImage"
                    :action="baseUrl + '/api/upload/image'"
                    accept=".jpg,.png,.jpeg"
                    class-name="id_card"
                    @uploadSuccess="uploadSuccessBackImage"
                  >
                    <span slot="uploadName">点击上传证件反面</span>
                  </upload-file>
                </template>
              </van-field>
            </van-form>
          </van-tab>
        </van-tabs>
        <div class="next_step">
          <van-button type="primary" @click="submitUserCardInfo">提交验证</van-button>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import uploadFile from '../components/UploadFile/index';
// import {
//   SiSTKWEventsManagementRegisterUserInput
// } from '@/lib/form/game/swaggerForm';
// import { CreateRegisterInputVO_Rules } from '@/lib/validate/mobile/register';
// import {
//   api_POST_EventsManagementUserRegisterUser
// } from '@/extend/api/gameswaggerApi/app';
export default {
  components: {
    uploadFile
  },
  data() {
    return {
      baseUrl: WEB_CONFIG.VUE_APP_STATIC_FILE_RUL,
      isPageLoading: false,
      // 页面类型 - 选择注册类型、实名认证
      pageType: 'chooseType',
      memberType: 'Personal',
      radioRealNameTyepe: 'NameNumber', // NameNumber、OCR
      // 新建注册
      createRegisterInputVO: new SiSTKWEventsManagementRegisterUserInput(),
      createRegisterInputVO_Rules: new CreateRegisterInputVO_Rules()
    };
  },
  watch: {
    radioRealNameTyepe() {
      this.init();
    }
  },
  created() {
    this.gameId = this.$route.query.id || '';
    this.init();
  },
  methods: {
    init() {
      this.createRegisterInputVO = new SiSTKWEventsManagementRegisterUserInput();
      this.$refs.createRegisterInputVO && this.$refs.createRegisterInputVO.resetValidation();
    },
    nextStep() {
      if (this.memberType === 'Delegation') {
        // 团体 —— 直接注册，注册成功去团体主页
        this.userRegisterUser({ userTypeCode: this.memberType });
      } else {
        this.pageType = 'realname';
        this.createRegisterInputVO = new SiSTKWEventsManagementRegisterUserInput();
      }
    },
    // 提交证件验证
    submitUserCardInfo() {
      this.$refs.createRegisterInputVO.validate().then(() => {
        this.createRegisterInputVO.userTypeCode = this.memberType;
        this.createRegisterInputVO.idCard.VerifyMethod = this.radioRealNameTyepe;
        this.userRegisterUser(this.createRegisterInputVO);
      });
    },
    userRegisterUser(userRegisterUserVO) {
      return new Promise((resolve, reject) => {
        this.isPageLoading = true;
        api_POST_EventsManagementUserRegisterUser(userRegisterUserVO).then(res => {
          this.isPageLoading = false;
          this.$store.dispatch('user/getCurrentUserType');
          if (this.gameId) {
            this.$router.push({
              name: 'MyCenterGame',
              params: { id: this.gameId }
            });
          } else {
            this.$router.push({
              name: 'MyCenter'
            });
          }
          resolve(res);
        }, error => {
          this.isPageLoading = false;
          this.$toast.fail(error.error.message);
          reject(error);
        });
      });
    },
    // 正面上传成功
    uploadSuccessFrontImage(response) {
      this.$set(this.createRegisterInputVO.idCard, 'idCardFrontImage', response.tempUrl);
    },
    // 反面上传成功
    uploadSuccessBackImage(response) {
      this.$set(this.createRegisterInputVO.idCard, 'idCardBackImage', response.tempUrl);
    },
    goBack() {
      this.pageType = 'chooseType';
    }
  }
};
</script>
<style>
.choose_type_content .title {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
</style>
